<!--
1. class 也是标签的属性，
    所以也可以用v-bind绑定,
    里面的css类用数组来写，
    类名上要加'',
    我们在数组中可以使用三元表达式,
    因为三元表达式比较麻烦，
    所以可以用{}对象来替换
    {}对象可以写在data中
2. css样式中key名中如果有-，那么需要加引号
    将css对象放入data中



-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .red{
            color:red;
        }

        .thin{
            font-weight: 200;
        }

        .italic{
            font-style: italic;
        }

        .active{
            letter-spacing: 0.5em;
        }



    </style>



</head>
<body>
    <div id="app">

        <h1 :class="['thin','red',{'active':flag}]">Class</h1>
        <h2 :class="{red: false, thin: false, italic:true}">TEST</h2>
        <h2 :class="classObj">TEST</h2>
        <h2 :class="classObj2">TEST</h2>
        <h1 :style="styleObj">style</h1>
        <h1 :style="[styleObj,styleObj2]">style</h1>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                flag:true,
                classObj:{red:true, thin: true, italic:true},
                classObj2:['active',{thin: true, italic:true}],
                styleObj:{color:'red','font-weight':200},
                styleObj2:{'font-style':'italic'}
            },
            methods:{

            }
        })
    </script>
</body>
</html>